<template>
  <div class="tree">
    <!-- 选择下拉盒子 -->
    <div class="select-box">
      <div class="project-class">
        <el-select v-model="classValue" placeholder="项目分类">
          <el-option
            v-for="item in classOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="project-type">
        <el-select v-model="typeValue" placeholder="项目类型">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 搜索盒子 -->
    <div class="serach">
      <el-input suffix-icon="el-icon-search" v-model="project_input">
      </el-input>
    </div>
    <!-- 树形盒子 -->
    <div class="tree-box">
      <el-tree
        :data="tree_data"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        ref="tree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ data.label }}</span>
          <i
            :class="{
              'el-icon-star-off': !state_compt(node.id),
              'el-icon-star-on': state_compt(node.id),
            }"
            @click.stop="fn(node)"
          >
          </i>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: "tree",
  data() {
    return {
      // 项目分类数据
      classOptions: [
        {
          value: "项群1",
          label: "项群1",
        },
        {
          value: "目群2",
          label: "目群2",
        },
      ],
      // 项目分类选中值
      classValue: "",
      // 项目类型数据
      typeOptions: [
        {
          value: "项目1",
          label: "项目1",
        },
        {
          value: "项目2",
          label: "项目2",
        },
      ],
      // 项目类型选中值
      typeValue: "",
      // 搜索框的value值
      project_input: "",
      // 树的数据
      tree_data: [],
      // 搜索的结果
      result_arr: [],
      // 星星的状态,[]{}
      start_state: [],
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [{ label: "点击项目群显示" }],
    },
    defaultProps: {
      type: Object,
      default: () => ({
        children: "children",
        label: "label",
      }),
    },
  },
  methods: {
    fn(node) {
      const result = this.start_state.find((item) => item.id === node.id);
      // 如果找不到值,则是数组里没有的,要添加
      if (!result) {
        this.start_state.push({ id: node.id, state: true });
      } else {
        result.state = !result.state;
      }
    },
    // 将数据传递回组件使用者
    handleNodeClick(data) {
      // 获取data重的treeNodeId
      const treeNodeId = data.$treeNodeId;
      // 获取整个树中的第一个节点的children的长度+1,用来与treeNodeId对比
      const treeChildLength = this.tree_data[0].children.length + 1;
      // 如果长度小于treeNodeId则点击的不是项目群
      if (treeChildLength < treeNodeId) return;
      this.tree_data[0].label = data.label;
      this.$emit("click", data);
    },
    // 筛选过滤数据
    filterNode(value, data, node) {
      // 过滤搜索方法
      if (!value) return true;
      let { parent } = node;
      let labels = [node.label];
      let level = 1;
      while (level < node.level) {
        labels = [...labels, parent.label];
        parent = parent.parent;
        level++;
      }
      return labels.some((label) => label.indexOf(value) !== -1);
    },
    // 将所有筛选工具的值存进数组里
    screening(index, val) {
      this.$set(this.result_arr, index, val);
      const str = this.result_arr.join("");
      return str;
    },
  },
  created() {
    this.tree_data = this.data;
  },
  watch: {
    // 监视输入款的值
    project_input(val) {
      this.$refs.tree.filter(this.screening(0, val));
    },
    // 监视项目类型的值
    typeValue(val) {
      this.$refs.tree.filter(this.screening(1, val));
    },
    // 项目分类进行筛选
    classValue(val) {
      this.$refs.tree.filter(this.screening(2, val));
    },
  },
  computed: {
    state_compt() {
      return (id) => this.start_state.find((item) => item.id === id)?.state;
    },
  },
};
</script>

<style>
.tree {
  width: 300px;
}
/* 下拉选择的盒子 */
.select-box {
  display: flex;
  justify-content: space-around;
}
.select-box .project-class {
  width: 110px;
}
.select-box .project-type {
  width: 110px;
}
/* 搜索盒子 */
.serach {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 10px;
}
/* 搜索款 */
.serach .el-input {
  width: 260px;
}
/* 搜索图标 */
.serach .el-input .el-icon-search {
  color: #aaaaaa;
  font-size: 17px;
  font-weight: 900;
}

/* 树形盒子 */
.tree-box {
  margin-top: 15px;
  width: 100%;
}
/* 树的样式 */
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 12px;
}
/* 选中星星的样式 */
.el-icon-star-on {
  color: #ff9900;
  font-size: 14px;
}
</style>
